<template>
  <div class="xiecheng">
    <div class="admin_main_block">
      <div class="admin_main_block_top">
        <div class="admin_main_block_left">
          <div>{{ i18n('member.archive_info') }}</div>
        </div>

        <div class="admin_main_block_right">
          <div>
            <el-button icon="Back" @click="router.go(-1)">
              {{ i18n('common.return') }}
            </el-button>
          </div>
          <div class="mr10">
            <el-button
              v-if="isAuth('module:member:export')"
              type="success"
              icon="Download"
              @click="exportHandle">
              {{ $t('common.export') }}
            </el-button>
          </div>
        </div>
      </div>

      <div class="admin_form_main">
        <el-card class="box-card" shadow="never">
          <template v-slot:header>
            <div class="clearfix">
              <span>{{ i18n('common.basic_info') }}</span>
            </div>
          </template>
          <div class="text item">
            <el-form ref="formRef" :model="dataForm" label-width="80">
              <el-row>
                <el-col :span="4">
                  <el-image :src="dataForm.avatar">
                    <template v-slot:error>
                      <div class="image-slot">
                        <el-icon><Picture /></el-icon>
                      </div>
                    </template>
                  </el-image>
                </el-col>
                <el-col :span="20">
                  <el-descriptions border>
                    <!-- 第一行 -->
                    <el-descriptions-item width="200" :label="i18n('member.username')" label-align="right" :span="3">
                      {{ dataForm.username }}
                    </el-descriptions-item>

                    <!-- 第二行 -->
                    <el-descriptions-item width="200" :label="i18n('member.member_no')" label-align="right">
                      {{ dataForm.member_no }}
                    </el-descriptions-item>
                    <el-descriptions-item width="200" :label="i18n('member.nickname')" label-align="right">
                      {{ dataForm.nickname }}
                    </el-descriptions-item>
                    <el-descriptions-item width="200" :label="i18n('member.role_title')" label-align="right">
                      {{ dataForm.role.title }}
                    </el-descriptions-item>

                    <!-- 第三行 -->
                    <el-descriptions-item width="200" :label="i18n('member.mobile')" label-align="right">
                      {{ dataForm.mobile }}
                    </el-descriptions-item>
                    <el-descriptions-item width="200" :label="i18n('member.email')" label-align="right">
                      {{ dataForm.email }}
                    </el-descriptions-item>
                    <el-descriptions-item width="200" :label="i18n('member.last_login_time')" label-align="right">
                      {{ dataForm.last_login_time }}
                    </el-descriptions-item>

                    <!-- 第四行 -->
                    <el-descriptions-item width="200" :label="i18n('common.create_time')" label-align="right">
                      {{ dataForm.create_time }}
                    </el-descriptions-item>
                    <el-descriptions-item width="200" :label="i18n('common.certification_status')" label-align="right">
                      {{ dataForm.certification_status.text }}
                    </el-descriptions-item>
                    <el-descriptions-item width="200" :label="i18n('common.status')" label-align="right">
                      {{ dataForm.status.text }}
                    </el-descriptions-item>
                  </el-descriptions>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </el-card>

        <el-card class="box-card mt10" shadow="never">
          <template v-slot:header>
            <div class="clearfix">
              <span>{{ i18n('common.detail_info') }}</span>
            </div>
          </template>
          <div class="text item">
            <el-descriptions border>
              <!-- 第一行 -->
              <el-descriptions-item width="200" :label="i18n('member.archive.realname')" label-align="right">
                {{ dataForm.realname }}
              </el-descriptions-item>
              <el-descriptions-item width="200" :label="i18n('member.archive.weixin')" label-align="right" :span="2">
                {{ dataForm.weixin }}
              </el-descriptions-item>

              <!-- 第二行 -->
              <el-descriptions-item width="200" :label="i18n('member.archive.id_card_no')" label-align="right">
                {{ dataForm.id_card_no }}
              </el-descriptions-item>
              <el-descriptions-item width="200" :label="i18n('member.archive.sex')" label-align="right">
                {{ dataForm.sex }}
              </el-descriptions-item>
              <el-descriptions-item width="200" :label="i18n('member.archive.age')" label-align="right">
                {{ dataForm.age }}
              </el-descriptions-item>

              <!-- 第三行 -->
              <el-descriptions-item width="200" :label="i18n('common.province')" label-align="right">
                {{ dataForm.province_text }}
              </el-descriptions-item>
              <el-descriptions-item width="200" :label="i18n('common.city')" label-align="right">
                {{ dataForm.city_text }}
              </el-descriptions-item>
              <el-descriptions-item width="200" :label="i18n('common.region')" label-align="right">
                {{ dataForm.region_text }}
              </el-descriptions-item>

              <!-- 第四行 -->
              <el-descriptions-item width="200" :label="i18n('member.archive.address')" label-align="right" :span="3">
                {{ dataForm.address }}
              </el-descriptions-item>

              <!-- 第五行 -->
              <el-descriptions-item width="200" :label="i18n('member.archive.work_address')" label-align="right" :span="3">
                {{ dataForm.work_address }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>

        <el-card class="box-card mt10" shadow="never">
          <template v-slot:header>
            <div class="clearfix">
              <span>{{ i18n('member.signature_info') }}</span>
            </div>
          </template>
          <div class="text item">
            <el-table :data="dataForm.signature" stripe border>
              <el-table-column prop="id" :label="i18n('common.id')" width="70">
              </el-table-column>

              <el-table-column :label="i18n('member.signature.type')" width="100">
                <template v-slot="scope">{{ scope.row.type.text }}</template>
              </el-table-column>

              <el-table-column prop="sign_ip_address" :label="i18n('member.signature.sign_ip_address')" width="160">
              </el-table-column>

              <el-table-column prop="equipment" :label="i18n('member.signature.equipment')">
              </el-table-column>

              <el-table-column prop="system" :label="i18n('member.signature.system')">
              </el-table-column>

              <el-table-column prop="browser" :label="i18n('member.signature.browser')">
              </el-table-column>

              <el-table-column prop="sign_time" :label="i18n('member.signature.sign_time')" width="160">
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup name="member-view">
  import { useBase } from "@/hooks/base/useBase"
  import { useForm } from "@/hooks/form/useForm"

  const { router, query, i18n, isAuth } = useBase()

  const model = ref('member')
  const dataForm = reactive({
    id: 0,
    member_no: '',
    avatar: '',
    username: '',
    nickname: '',
    mobile: '',
    email: '',
    last_login_time: '',
    create_time: '',
    certification_status: [],
    status: [],
    role: [],
    realname: '',
    id_card_no: '',
    weixin: '',
    sex: '',
    age: '',
    province_text: '',
    city_text: '',
    region_text: '',
    address: '',
    work_address: '',
    signature: [],
  })

  const dataRule = reactive({})

  const {
    formRef
  } = useForm(model.value, dataForm)

  const init = (form) => {
    dataForm.id = query.id || 0

    nextTick(() => {
      form.value.resetFields()
      if (dataForm.id) {
        $http({
          url: $http.adornUrl(`/member/view/${dataForm.id}`),
          method: 'get',
          params: $http.adornParams({}),
        }).then(({ data }) => {
          if (data && data.status === 200) {
            dataForm.id = data.data.id
            dataForm.member_no = data.data.member_no
            dataForm.avatar = data.data.avatar
            dataForm.username = data.data.username
            dataForm.nickname = data.data.nickname
            dataForm.mobile = data.data.mobile
            dataForm.email = data.data.email
            dataForm.last_login_time = data.data.last_login_time
            dataForm.create_time = data.data.create_time
            dataForm.certification_status = data.data.certification_status
            dataForm.status = data.data.status
            dataForm.role = data.data.role
          }
        }).then(() => {
          if (dataForm.id) {
            $http({
              url: $http.adornUrl(`/${model.value}/archive/data`),
              method: 'get',
              params: $http.adornParams({
                'member_id': dataForm.id
              }),
            }).then(({ data }) => {
              if (data && data.data && data.status === 200) {
                dataForm.realname = data.data.realname
                dataForm.id_card_no = data.data.id_card_no
                dataForm.weixin = data.data.weixin
                dataForm.sex = data.data.sex.text
                dataForm.age = data.data.age
                dataForm.province_text = data.data.province_id.text
                dataForm.city_text = data.data.city_id.text
                dataForm.region_text = data.data.region_id.text
                dataForm.address = data.data.address
                dataForm.work_address = data.data.work_address
              }
            })
          }
        }).then(() => {
          if (dataForm.id) {
            $http({
              url: $http.adornUrl(`/${model.value}/signature/select`),
              method: 'get',
              params: $http.adornParams({
                'limit': 15,
                'member_id': dataForm.id
              }),
            }).then(({ data }) => {
              if (data && data.data && data.status === 200) {
                dataForm.signature = data.data
              }
            })
          }
        })
      }
    })
  }


  const exportHandle = () => {
    $http({
      url: $http.adornUrl(`/member/export`),
      method: 'post',
      data: $http.adornData({
        'id': dataForm.id
      })
    }).then(({data}) => {
      if (data && data.status === 200) {
        window.open(data.data)
      } else {
        $message.error(i18n(data.message))
      }
    })
  }

  onMounted(() => {
    init(formRef)
  })
</script>

<style lang="scss" scoped>
  .el-image {
    padding: 0 5px;
    max-width: 260px;
    max-height: 260px;
    width: 100%;
    height: 260px;
  }
</style>
